<template>
	<view style="position: relative;">
    <view v-if="showPage" class="main-page" :style="{
          backgroundImage:'url('+staticImgs.topBg+')'
       }">
      <u-navbar leftIconColor="#fff" placeholder @leftClick="backToPage" bgColor="transparent" />

      <view class="tit" >
        <image class="img" :src="staticImgs.tit" mode="widthFix"></image>
      </view>

      <view class="info-wraper" >
        <view class="info-l">
          <view  class="row-1">姓名：{{nickName}}</view>
          <view class="row-2">诊断日期：{{createTime}}</view>
        </view>
        <view class="info-r"
          :style="{
              backgroundImage:'url('+staticImgs.degressBg+')'
           }"
        >
          <view class="row-1">待诊断</view>
          <view class="row-2">完成全部测试解锁</view>
        </view>
      </view>

				<view class="report-res-info-box" :style="{
				   backgroundImage:'url('+staticImgs.resBoxBg+')'
				}">
					<view class="row-1">诊断日期：{{currentTime}}</view>
					<view class="row-2" :style="{
				     backgroundImage:'url('+staticImgs.resInfoBoxBg+')'
				  }">你可能有{{sclData.remarkInfo || ''}}</view>
					<view class="row-3">解锁手册助你全面检测抑郁情绪问题</view>
				</view>

				<view class="scl-group-list-box">
					<view class="tit-img-box">
						<image class="img" :src="staticImgs.boxTit" mode=""></image>
					</view>

					<view class="main-wrapper">
						<view class="intro-tit-box">
							{{sclListData.length}}大量表
						</view>

						<view class="scl-list">
							<view class="scl-box" v-for="(scl,index) in sclListData" :key="index">
								<view class="name">{{scl.sclName || ''}}</view>
								<view class="num"></view>
								<view class="price">¥{{scl.newOriginalPrice || ''}}</view>
							</view>
						</view>

						<view class="scl-more-info">
							<template>
								<view class="info-item">
									<view class="label">测评原价</view>
									<view class="price">￥{{priceObj.sumPrice || ''}}</view>
								</view>
								<view class="info-item">
									<view class="label">优惠减免</view>
									<view class="del-price">-￥{{priceObj.deratePrice || '0'}}</view>
								</view>
							</template>

							<view class="info-item">
								<view class="label bold-label">实际应付</view>
								<view class="price bold-price">￥{{priceObj.price || ''}}</view>
							</view>

						</view>
          <!-- scl-more-inof  end -->

			<view class="button-wrapper" @click="toOrderPay">
				<image class="img" :src="staticImgs.btnImg" mode="widthFix"></image>
			</view>

		</view>

      </view>

    </view>


		<template>

			<DialogMask v-if="showTipModal && tipObj && tipObj.content" @click="dialogClose">
				<template #content>
					<text>
						{{tipObj.content || ''}}
					</text>
				</template>

				<template #btn1 v-if="tipObj.btnNum > 0 && tipObj.leftBtn.txt">
					<view class="btn-normal btn-base" :style="[lStyle]"
						@click.stop="setCurrentTipIndex(tipObj.leftBtn,'leftBtn')">
						{{tipObj.leftBtn.txt}}
					</view>
				</template>
				<template #btn2 v-if="tipObj.btnNum > 1 && tipObj.rightBtn.txt">
					<view class="btn-normal btn-base" :style="[rStyle]"
						@click.stop="setCurrentTipIndex(tipObj.rightBtn,'rightBtn')">
						{{tipObj.rightBtn.txt}}
					</view>
				</template>

			</DialogMask>

		</template>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import DialogMask from './DialogMask.vue'
	export default {
		components: {
			DialogMask
		},
		data() {
			return {
				staticImgs: {
					topBg: this.imgBaseURL + '/scl/checkup-depressed/main-top-page-bg.png',
					boxTit: this.imgBaseURL + '/scl/checkup-depressed/pay-page-tit.png',
          btnImg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-btn.png',
					resBoxBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-box-bg.png',
					resInfoBoxBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-info-bg.png',
          degressBg: this.imgBaseURL + '/scl/checkup-depressed/v2/degress-bg.png',
          tit: this.imgBaseURL + '/scl/checkup-depressed/v2/tit-new-v2.png',
				},
				sclListData: [],
				sclId: '',
				payGroupId: '',
				sclData: {},
				showPage: false,
				priceObj: {
					deratePrice: 0,
					price: 0,
					sumPrice: 0,
				},
				tipsList: [],
				currentTipIndex: 0,
				currentTipKey: '',
				tipObj: {},
				showTipModal: false,
				currentTime: '',
				createTime: '',

			}
		},
		computed: {
			...mapGetters('user', ['nickName']),
			lStyle() {
				if (this.tipObj.btnNum > 1 && !this.tipObj.leftBtn.style) {
					return {
						backgroundColor: '#5EB7FF'
					}
				} else {
					return this.tipObj?.leftBtn?.style
				}
			},
			rStyle() {
				return this.tipObj?.rightBtn?.style
			},
		},
    async onLoad(opts) {
      this.sclId = opts.sclId
      this.opts = opts
      this.payGroupId = this.sclId
			this.$u.api.getDepressionList().then(({
				data: res
			}) => {
				const {
					sclExaminationBOS,
					sclId
				} = res.data
				this.payGroupId = sclId||this.sclId

				console.log(sclExaminationBOS, '===sclExaminationBOS==')
				console.log(this.sclId, '=====this.sclId====')
				const tmpSclData = sclExaminationBOS.find(item => item.sclId == this.sclId)
				this.sclData = tmpSclData
				// console.log(tmpSclData,'===tmpSclData')
				this.sclListData = sclExaminationBOS

				this.priceObj.deratePrice = res.data.deratePrice
				this.priceObj.price = res.data.price
				this.priceObj.sumPrice = res.data.sumPrice

				this.createTime = res.data.createTime
				this.currentTime = this.$dayjs().format('YYYY.MM.DD')
				this.showPage = true
			})

      this.initDialog()

      return false

      // const {
      //   data: res
      // } = await this.$u.api.getCheckUpList()
      // this.sclListData = JSON.parse(JSON.stringify(res.data.sclExaminationBOS))
      this.sclListData = [{
          "sclId": "db87db28bb7042da91a3ab6d82e7bcbe",
          "sclUid": "db87db28bb7042da91a3ab6d82e7bcbe",
          "sclTotalId": "202405301121",
          "sclName": "心理全维度症状自评(2024年版)",
          "newOriginalPrice": 0.01,
          "type": 0,
          "remark": "全维度",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796027565462056962",
          "healthType": "???",
          "isSclReport": "Y",
          "sclExaminationReprotId": "1843535755637395457",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1737284540104425474",
          "sclUid": "bdb173d5ecfc47379956adf1f46f4ad0",
          "sclTotalId": "202405301121",
          "sclName": "抑郁自评量表（SDS）",
          "newOriginalPrice": 0.02,
          "type": 1,
          "remark": "抑郁",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796028151205031938",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589762",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1737284592004743169",
          "sclUid": "9430d8d50dca440ba6a1e14d868b392e",
          "sclTotalId": "202405301121",
          "sclName": "焦虑自评量表（SAS）",
          "newOriginalPrice": 0.01,
          "type": 2,
          "remark": "焦虑",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796028302703263746",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589763",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1744235691976761345",
          "sclUid": "a3db095f31ec46b48874028b9180ef91",
          "sclTotalId": "202405301121",
          "sclName": "人际关系诊断量表",
          "newOriginalPrice": 10.2,
          "type": 3,
          "remark": "人际关系",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796045058071126018",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589764",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1838046119032958978",
          "sclUid": "8e9b66be8d8241babbd161e69202056e",
          "sclTotalId": "202405301121",
          "sclName": "心理压力感受测试（TT专用）",
          "newOriginalPrice": 4.5,
          "type": 4,
          "remark": "压力",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796045659253288962",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589765",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1764906872111104002",
          "sclUid": "2f42c186229d4b3f8afc3c02812708e7",
          "sclTotalId": "202405301121",
          "sclName": "敏感指数测试",
          "newOriginalPrice": 11.8,
          "type": 5,
          "remark": "敏感",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796045915508535297",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755696115713",
          "moduleHealthStatus": null
        }
      ]
		},
		methods: {
			dialogClose() {
				console.log('dialogClose------')
				this.showTipModal = false
			},
			initDialog() {
				this.$u.api.getWriterDetail({
					entrancePay: 'Y'
				}).then(({
					data: res
				}) => {
					if (res.code == 200) {
						this.tipsList = res.data.jsonArray

						if (res.data.showKey) {
							this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
							this.currentTipKey = res.data.showKey
							this.tipObj = this.tipsList[this.currentTipIndex]
							this.showTipModal = true
						}
					}
					console.log('getWriterDetail：', res.data)
				})
			},
			toOrderPay() {
				if(this.$fangBaoClick())return
				if (this.pageLoading) return
				const submitForm = this.$removeEmptyProperty({
					orderType: '12',
					sclId: this.payGroupId
				})
				const that = this
				this.pageLoading = true
				this.$u.api.addLog({
					sclId: this.payGroupId,
					sourseType: 1
				})
				this.$u.api.orderPay(submitForm).then(res => {
					if (res.data.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							service: 5,
							orderInfo: res.data.data.wr,
							timeStamp: res.data.data.wr.timeStamp,
							nonceStr: res.data.data.wr.nonceStr,
							package: res.data.data.wr.packageValue,
							signType: res.data.data.wr.signType,
							paySign: res.data.data.wr.paySign,
							success: function(res) {
								console.log(res, '================= uni.requestPayment - res')
								that.toSubmit()
								that.useSubscription()
								that.pageLoading = false
							},
							fail() {
								that.pageLoading = false
							}
						})
					} else {
						that.$showToast(res.data.message);
						that.pageLoading = false
					}
				}).catch(e => {
					that.pageLoading = false
				})
			},
			// 如果还有需要对话框的地方，抽出一个mixin!
			async setCurrentTipIndex(targetObj, side) {
				const key = targetObj.next
				console.log(this.tipsList[this.currentTipIndex], '---targetObj')

				await this.$u.api.updateDepressionDialogIndex({
					showKey: this.tipsList[this.currentTipIndex].key
				})

				if (targetObj.type == 'close') {
					return this.showTipModal = false
				} else if (targetObj.type == 'skip') {
					console.log(this.fromSclId, targetObj, '-------targetObj')

					if (this.canSeeCheckupDepressedIntro) {
						this.updateUserJson('canSeeCheckupDepressedIntro')
					}

					return uni.navigateTo({
						url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
							sclId: targetObj.next,
							sclReportType: 2,
							hasOwn: this.isPayOk
						}),
						success: () => {
							this.showTipModal = false
						}
					})

				}


				this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === key)
				this.currentTipKey = key

				this.tipObj = this.tipsList[this.currentTipIndex]
			},
      backToPage() {
        uni.redirectTo({
          url: '/subcontractorC/pages/checkupDepressed/index'
        })
      },
			toSubmit() {
				uni.showLoading({
					title: "提交中..."
				})

				const submitForm = this.$removeEmptyProperty({
					type: 'order',
					sclId: this.sclId,
					testDuration: this.opts.testDuration,
					h5Type: this.opts.userType,
					answerJson: uni.getStorageSync(`sclAnswer-${this.sclId}`),
					sclReportType: 1
				})

				this.$u.api.userWebAnswer(submitForm).then(res => {
					uni.removeStorageSync(`sclAnswer-${this.sclId}`)
					if (res.data.code == 2000) {
						uni.redirectTo({
							url: '/subcontractorC/pages/checkupDepressed/index?reportId=' + res.data.data
								.id
						})
					} else {
						setTimeout(() => {
							this.$showToast(res.data.message);
						}, 300)
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.main-page {
		width: 100vw;
    height: 100%;
    background-size: 100% 776rpx;
    background-color: rgba(162, 242, 226, 1);
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;

    >.tit {
      width: 620rpx;
      height: 104rpx;
      margin: auto;
      margin-bottom: 20rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

    .info-wraper {
      display: flex;
      // align-items: center;
      justify-content: space-between;
      width: 710rpx;
      margin: auto;
      background: linear-gradient( 270deg, rgba(87, 203, 205, 0.4) 0%, rgba(141, 226, 229, 0.4) 51%, rgba(20, 156, 158, 0.4) 100%);
      border-radius: 16rpx;

      .info-l{
        margin-left: 30rpx;

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: rgba(255,255,255,.9);
        line-height: 42rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;


        .row-1{
          margin-top: 34rpx;
          margin-bottom: 12rpx;
        }
      }

      .info-r{
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 210rpx;
        height: 140rpx;
        box-sizing: border-box;
        margin: 12rpx;
        margin-right: 30rpx;
        padding-top: 46rpx;

        .row-1{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 40rpx;
         color: #A77A3D;
         line-height: 56rpx;
         letter-spacing: 2px;
         text-align: center;
         font-style: normal;
        }
        .row-2{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #94754C;
          line-height: 28rpx;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
        }
      }
    }

    // >.tit {
    //   width: 466rpx;
    //   height: 78rpx;
    //   margin: auto;

    //   .img {
    //     width: 100%;
    //     height: 100%;
    //   }
    // }

    // .info-wraper {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   width: 680rpx;
    //   margin: auto;

    //   font-family: PingFangSC, PingFang SC;
    //   font-weight: 400;
    //   font-size: 32rpx;
    //   color: #FFFFFF;
    //   line-height: 45rpx;
    //   letter-spacing: 1px;

    //   font-style: normal;
    // }


		.intro-tit-box {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #326876;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			position: relative;
			margin-left: 18rpx;

			margin-bottom: 10rpx;


			&::before {
				width: 8rpx;
				top: 10rpx;
				height: 22rpx;
				background: #326876;
				border-radius: 4rpx;

				content: '';
				position: absolute;
				left: -18rpx;
			}
		}

		.scl-list {
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx dashed #979797;
			margin-top: 18rpx;

			.scl-box {
				display: flex;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #326876;
				font-style: normal;

				.name {
					width: 434rpx;
				}

				.num {
					width: 28rpx;
				}

				.price {
					flex: 1;
					text-align: right;
				}
			}
		}

		.scl-more-info {
			display: flex;
			flex-direction: column;
			row-gap: 14rpx;
			padding-top: 24rpx;


			.info-item {
				display: flex;
				align-items: center;

				.label {
					width: 400rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #326876;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.price {
					flex: 1;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #326876;
					line-height: 40rpx;
					text-align: right;
					font-style: normal;
				}

				.del-price {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #F90101;
					line-height: 40rpx;
					text-align: right;
					font-style: normal;
					flex: 1;
				}

				.bold-label {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #326876;
					line-height: 40rpx;
					font-style: normal;
				}

				.bold-price {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #326876;
					line-height: 56rpx;
					text-align: right;
					font-style: normal;
				}

			}

		}


		.scl-group-list-box {
			width: 680rpx;
			// height: 745rpx;
			background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
			box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
			border-radius: 24rpx;
			position: relative;
			margin: auto;
      padding-bottom: 84rpx;
		}

		.report-res-info-box {
			// width: 682rpx;
			width: 718rpx;
			// height: 368rpx;
			height: 386rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			margin: auto;
			margin-bottom: 18rpx;

			.row-1 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: rgba(12, 71, 59, .39);
				// line-height: 45rpx;
				text-align: center;
				font-style: normal;

				padding-top: 128rpx;
			}

			.row-2 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 48rpx;
				color: #0C473B;
				line-height: 78rpx;
				text-align: center;
				font-style: normal;

				width: 610rpx;
				height: 78rpx;

				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin: auto;

				margin-top: 12rpx;
				margin-bottom: 12rpx;
			}

			.row-3 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #064F44;
				line-height: 62rpx;
				text-align: center;
				font-style: normal;

				width: 590rpx;
				height: 62rpx;
				background: rgba(255, 255, 255, .57);
				box-shadow: inset 0rpx 1rpx 10rpx 0rpx rgba(146, 231, 216, .57);
				border-radius: 30rpx;

				margin: auto;

			}

		}


		.tit-img-box {
			left: 50%;
			top: -10rpx;
			transform: translateX(-50%);

			width: 416rpx;
			height: 62rpx;
			position: absolute;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.main-wrapper {
			width: 590rpx;
			margin: auto;
			// margin-bottom: calc(100rpx + constant(safe-area-inset-bottom));
			// margin-bottom: calc(100rpx + env(safe-area-inset-bottom));      
			// padding-top: 64rpx;
			padding-top: 90rpx;

			.intro-tit-box {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #326876;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				position: relative;
				margin-left: 18rpx;

				margin-bottom: 10rpx;

				&::before {
					width: 8rpx;
					top: 10rpx;
					height: 22rpx;
					background: #326876;
					border-radius: 4rpx;

					content: '';
					position: absolute;
					left: -18rpx;
				}
			}

      .button-wrapper {
        width: 360rpx;
        height: 90rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -36rpx;
        // bottom: calc(50rpx + constant(safe-area-inset-bottom));
        // bottom: calc(50rpx + env(safe-area-inset-bottom));

        .img {
          width: 100%;
          height: 100%;
        }
      }
		}


	}

	.btn-base {
		width: 270rpx;
		height: 70rpx;
		border-radius: 45rpx;

		font-family: PingFang-SC, PingFang-SC;
		// font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	.btn-normal {
		background: #5ED5FF;
	}
</style>